<template>
  <view class="banner" :style="{ height: bannerHeight, width: bannerWidth }">
    <view class="slot-top">
      <slot name="top"></slot>
    </view>
    <template v-for="item in bannerList">
      <view
        :class="{
          'fade-image': true,
          hidden: item[imgLabelKey] !== currentBanner,
        }"
      >
        <u-image
          width="100%"
          height="650rpx"
          :src="item[imgLabelKey]"
        ></u-image>
      </view>
    </template>

    <swiper
      class="swiper"
      :style="{
        'border-radius': radius,
        height: swiperHeight,
        width: swiperWidth,
      }"
      :current="currentIndex"
      @change="changeBanner"
      autoplay
    >
      <swiper-item
        class="swiper-item"
        :style="{ 'border-radius': radius }"
        v-for="(item, index) in bannerList"
        :key="index"
      >
        <view class="img-box">
          <u-image
            :width="bannerWidth"
            :height="bannerHeight"
            :src="item[imgLabelKey]"
          ></u-image>
        </view>
      </swiper-item>
    </swiper>
    <view class="tip-num">{{
      `${currentIndex + 1}/${bannerList.length}`
    }}</view>
  </view>
</template>

<script>
export default {
  name: "nested-banner",
  props: {
    bannerList: {
      type: Array,
      default: () => [],
    },
    imgLabelKey: {
      type: String,
      default: "url",
    },
    radius: {
      type: String,
      default: "24rpx",
    },
    bannerWidth: {
      type: String,
      default: "750rpx",
    },
    bannerHeight: {
      type: String,
      default: "650rpx",
    },
    swiperWidth: {
      type: String,
      default: "702rpx",
    },
    swiperHeight: {
      type: String,
      default: "300rpx",
    },
  },
  data() {
    return {
      currentIndex: 0,
      currentBanner: "",
    };
  },
  methods: {
    changeBanner(e) {
      this.currentIndex = e.detail.current;
      setTimeout(() => {
        this.setCurrentBanner();
      }, 300);
    },
    setCurrentBanner() {
      this.currentBanner =
        this.bannerList[this.currentIndex]?.[this.imgLabelKey];
    },
  },
  mounted() {
    this.setCurrentBanner();
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 750rpx;
  height: 650rpx;
  position: relative;
  border-radius: 0 0 24rpx 24rpx;
  overflow: hidden;
  .slot-top {
    position: relative;
    z-index: 1;
  }
  .fade-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 650rpx;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
  }
  .fade-image.hidden {
    opacity: 0;
  }
  .tip-num {
    position: absolute;
    bottom: 48rpx;
    right: 48rpx;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20rpx;
    padding: 0 16rpx;
    z-index: 1;
    height: 40rpx;
    color: #fff;
    font-size: 24rpx;
    line-height: 40rpx;
  }

  .swiper {
    position: absolute;
    bottom: 24rpx;
    left: 0;
    margin: 0 24rpx;
    width: 702rpx;
    height: 300rpx;
    overflow: hidden;

    .swiper-item {
      width: 100%;
      height: 100%;
      position: relative;

      .img-box {
        position: absolute;
        bottom: -24rpx;
        left: -24rpx;
        width: fit-content;
        height: fit-content;
      }
    }
  }
}
</style>
